<template>
  <div class="model-body">
    <!-- <div class="title">实验室对应可疑结果情况表</div> -->
    <div class="table">
      <div class="left">
        <div class="time-btn" v-for="item in dataList" :key="item.value" :class="time === item.value ? 'active' : ''"
          @click="timeCheckedTwo(item.value)">
          {{ item.label }}
        </div>
      </div>
      <div class="right">

        <vxe-table border show-footer show-header-overflow show-footer-overflow ref="tableRef"
          :scroll-x="{ enabled: true, gt: 0 }" height="auto" align="center" :loading="loading" :print-config="{}"
          :column-config="{ resizable: true }" :span-method="spanMethods" :merge-footer-items="mergeFooterItems"
          :footer-method="footerMethod" :data="tableData">
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="LabCode" title="单位代码" width="80"></vxe-column>
          <vxe-colgroup title="可疑结果数与检测项目">
            <vxe-column v-for="item in titleList" :key="item.ResultName" :field="item.ResultName"
              :title="item.ResultName" width="100"></vxe-column>
          </vxe-colgroup>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, reactive, onMounted, onUnmounted, ref, computed, defineEmits } from "vue";
const props = defineProps({
  datas: {
    type: Object,
    required: true
  },
  dataList: {
    type: Array,
    required: true
  },
  time: {
    type: String,
    required: true
  }
})
const list = computed(() => {
  return props.datas.LabCode
})
const titleList = computed(() => {
  return props.datas.ItemInfo
})
const loading = ref(false)
const tableData = ref([])
const mergeFooterItems = ref([])
const tableRef = ref()
const toolbarRef = ref()
const timeInfo = reactive({
  setInterval: 0,
  dateDay: "",
  dateYear: "",
  dateWeek: "",
})
const summarize = (list, propertyName) => {
  // 使用filter方法过滤出属性值为"+"的对象
  const filteredList = list.filter(item => item[propertyName] === "+");

  // 返回过滤后数组的长度，即属性值为"+"的对象的数量
  return filteredList.length;
}
const footerMethod = ({ columns, data }) => {
  return [
    columns.map((column, index) => {
      let result;
      if (index === 0) {
        result = '总计'
      } else {
        const list = data
        result = summarize(list, column.field);
      }
      return result
    })
  ]
}


loading.value = true
loading.value = false
const resultObject = titleList.value?.reduce((accumulator, currentValue) => {
  accumulator[currentValue.ResultName] = false;
  return accumulator;
}, {});

// 第二步：遍历array2，并更新resultObject中的值
const finalArray = list.value.map(item => {
  const labCode = item.LabCode;
  const itemInfos = item.ItemInfo;

  // 创建一个新对象来存储结果
  const result = { LabCode: labCode };

  // 遍历ItemInfo数组，并更新resultObject中的值
  itemInfos.forEach(info => {
    const resultName = info.ResultName;
    // 如果resultObject中存在该ResultName，则将其值设置为true
    if (resultObject[resultName]) {
      result[resultName] = '';
    } else {
      result[resultName] = '+';
    }
  });

  return result;
});

tableData.value = finalArray

/**
 * 二维数组合并单元格（仅针对数组对象本身）
 * @param data 接口返回的数组对象
 * @param field 指定合并选项为数组对象的某个属性值
 * @param colArr 需要合并列的下标
 * @returns mergeCells单元格合并规则
 */
function spanMethods({ row, $rowIndex, column, data }) {
  let fields = ["seq", "LabCode"]
  let cellValue = row[column.property]
  if (cellValue && fields.includes(column.property)) {
    let prevRow = data[$rowIndex - 1]
    let nextRow = data[$rowIndex + 1]
    if (prevRow && prevRow[column.property] === cellValue) {
      return { rowspan: 0, colspan: 0 }
    } else {
      let countRowspan = 1
      while (nextRow && nextRow[column.property] === cellValue) {
        nextRow = data[++countRowspan + $rowIndex]
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 }
      }
    }
  }
}
// 根据行数据计算表尾合并规则
mergeFooterItems.value = [
  { row: 0, col: 0, rowspan: 1, colspan: 2 },
]
const emits = defineEmits(['timeCheckedTwo'])// 定义一个或多个自定义事件
const timeCheckedTwo = (time) => {
  emits('timeCheckedTwo', time)
}
// 生命周期
onMounted(() => {
  // 将表格和工具栏进行关联
  const $table = tableRef.value
  const $toolbar = toolbarRef.value
  if ($table && $toolbar) {
    $table.connect($toolbar)
  }
})
onUnmounted(() => {
  clearInterval(timeInfo.setInterval)
})
</script>

<style lang="scss" scoped>
.model-body {
  width: 100%;

  .title {
    width: 100%;
    padding: 0.2rem;
    text-align: center;
    font-size: 1rem;
    color: #ffffff;
    // margin-bottom: 10px;
  }

  .table {
    height: 82vh;
    display: flex;
    flex-direction: column;

    .left {
      margin: 0.5rem 0.5rem 0 0.5rem;
      width: 100px;
      padding-right: 20px;
      display: flex;

      .time-btn {
        text-align: center;
        padding: 10px;
        width: 80px;
        background-color: #0873AA;
        color: #ffffff;
        margin-bottom: 10px;

        &:hover {
          cursor: pointer;
          background-color: #32A4F1
        }

        &.active {
          background-color: #32A4F1
        }

      }
    }

    .right {
      height: 100%;
      width: 100vw;
    }
  }
}

::v-deep(.vxe-header--column) {
  background: #0873AA;
  color: #ffffff;
}

::v-deep(.vxe-body--column) {
  background: #32A4F1;
  color: #ffffff;
}

::v-deep(.vxe-footer--column) {
  background: #0873AA;
  color: #ffffff;
}
</style>
